<template>
  <div class="third">
    <div @click="next(false)">
      <img :src='types[type - 1].url1' alt="">
      <p>{{ types[type - 1].des1 }}</p>
    </div>
    <div @click="next(true)">
      <img :src='types[type - 1].url2' alt="">
      <p>{{ types[type - 1].des2 }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'surveyIndex3',
  data () {
    return {
      types: [
        {
          url1: '/static/images/type1.png',
          url2: '/static/images/type2.png',
          des1: '单选题(无图)',
          des2: '单选题(有图)'
        },
        {
          url1: '/static/images/type3.png',
          url2: '/static/images/type4.png',
          des1: '多选题(无图)',
          des2: '多选题(有图)'
        },
        {
          url1: '/static/images/type5.png',
          url2: '/static/images/type6.png',
          des1: '滑动题(无图)',
          des2: '滑动题(有图)'
        },
        {
          url1: '/static/images/type7.png',
          url2: '/static/images/type8.png',
          des1: '定量题(无图)',
          des2: '定量题(有图)'
        },
        {
          url1: '/static/images/type9.png',
          url2: '/static/images/type10.png',
          des1: '排序题(无图)',
          des2: '排序题(有图)'
        },
        {
          url1: '/static/images/type11.png',
          url2: '/static/images/type12.png',
          des1: '选图题(无图)',
          des2: '选图题(有图)'
        },
        {
          url1: '/static/images/type11.png',
          url2: '/static/images/type12.png',
          des1: '填写题(无图)',
          des2: '填写题(有图)'
        }
      ]
    }
  },
  props: ['type'],
  methods: {
    next (flag) {
      this.$emit('hasPic', flag)
      this.$router.push({name: 'surveyIndex4'})
    }                        // 进入下一步 填写题目
  }
}
</script>

<style lang="scss" scoped>
.third {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
img {
  width: 361px;
  height: 361px;
}
p {
  text-align: center;
  margin: 40px auto;
  font-size: 32px;
  color: #999;
}
</style>
